<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>add</button>
    <script>
      const button = document.querySelector("button");

      let activeSub = undefined;
      function effect(fn) {
        activeSub = fn;
        fn();
        activeSub = undefined;
      }

      class RefImpl {
        _value = undefined;
        subs = new Set();

        constructor(value) {
          this._value = value;
        }

        get value() {
          if (activeSub) {
            this.subs.add(activeSub);
          }
          return this._value;
        }

        set value(newVal) {
          this._value = newVal;
          this.subs.forEach((fun) => fun());
        }
      }

      function ref(value) {
        return new RefImpl(value);
      }

      const count = ref(10);

      effect(() => {
        console.log(count.value);
      });

      button.onclick = () => count.value++;
    </script>
  </body>
</html>
